{{ define "title" }}{{ .Title }}{{ end }}
{{ define "head" }}
    <meta name='description' content='{{ .Desc }}'>
    <meta name='author' content='Mat Ryer + contributors'>
    <meta name='keywords' content='macos,menubar,xbar,bitbar'>
    <meta itemprop='image' content='{{ .ImageURL }}'>
    <meta itemprop='name' content='{{ .Title }}'>
    <meta itemprop='description' content='{{ .Desc }}'>
    <meta name='twitter:card' content='summary_large_image'>
    <meta name='twitter:title' content='{{ .Title }}'>
    <meta name='twitter:description' content='{{ .Desc }}'>
    <meta name='twitter:image' content='{{ .ImageURL }}'>
    <meta name='twitter:creator' content='matryer'>
    <meta property='og:title' content='{{ .Title }}'>
    <meta property='og:description' content='{{ .Desc }}'>
    <meta property='og:url' content='https://xbarapp.com/docs/{{ .Path }}'>
    <meta property='og:site_name' content='xbar lets you put anything into your macOS menu bar'>
    <meta property='og:type' content='article'>
    <meta property='og:image' content='{{ .ImageURL }}'>
    <link rel='apple-touch-icon' sizes='180x180' href='/public/img/xbar-2048.png'>
    <link rel='icon' type='image/png' sizes='32x32' href='/public/img/xbar-2048.png'>
    <link rel='shortcut icon' href='/public/img/xbar-2048.png'>
    <meta name='msapplication-TileColor' content='#0f0c29'>
    <meta name='msapplication-config' content='/public/browserconfig.xml'>
    <meta name='theme-color' content='#0f0c29'>
    <style>
        .article {
            color: #ddd;
        }
        .article a {
            text-decoration: underline;
            padding: 1px 4px;
            margin-left: -2px;
            margin-right: -2px;
        }
        .article a:hover {
            background-color: white;
            color: black;
            text-decoration: none;
            padding: 1px 4px;
            margin-left: -2px;
            margin-right: -2px;
        }
        .article img {
            box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
            max-width: 100%;
            display: block;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .article p {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
            margin-top: 40px;
            margin-bottom: 20px;
            font-weight: bolder;
            color: white;
        }
        .article ul {
            margin-top: 10px;
            margin-bottom: 20px;
            list-style-type: disc;
            margin-left: 20px;
        }
        .article ol {
            margin-top: 10px;
            margin-bottom: 20px;
            list-style-type: decimal;
            margin-left: 30px;
        }
        .article ul li {
            padding-left: 5px;
        }
        .article ol li {
            padding-left: 15px;
        }
        .article li {
            margin-bottom: 10px;
        }
        .article pre {
            padding: 20px;
            padding-top: 10px;
            font-size: 0.9em;
        }
        .article code {
            font-size: 0.8em;
        }
    </style>
{{ end }}
{{ define "body" }}
    <div class='article container mx-auto max-w-3xl p-8 pt-0'>
        <h1 class='title text-5xl bg-black bg-opacity-25 p-8 rounded-lg shadow-lg'>
            <div class='max-w-xl'>
                {{ .Title }}
            </div>
        </h1>
        <div class='text-xl pt-8 p-2'>
            {{ .HTML }}
        </div>
        {{ template "support" . }}
    </div>
{{ end }}
